<template>
	<view>
		<view v-if="!this.$store.getters.isCanUse">
			<uni-notice-bar scrollable="true" single="true" text="[单行] 这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏"></uni-notice-bar>

			<uni-swiper-dot :info="info" :current="current" :mode="mode" :dots-styles="dotsStyles" field="content">
				<swiper class="swiper-box" @change="change" :autoplay="autoplay">
					<swiper-item v-for="(item, index) in info" :key="index">
						<view :class="item.colorClass" class="swiper-item">
							<image :src="item.url" mode="aspectFill" />
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			<button @tap="sendData">传值到下一页</button>
			<button @tap="pay">微信支付</button>
			<button @tap="search">搜索框</button>
		</view>

		<!-- #ifdef MP-WEIXIN -->
		<view v-if="this.$store.getters.isCanUse">
			<!-- <view v-if="isCanUse"> -->
			<view>
				<view class='header'>
					<image src='/static/img/wx_login.png'></image>
				</view>
				<view class='content'>
					<view>申请获取以下权限</view>
					<text>获得你的公开信息(昵称，头像、地区等)</text>
				</view>

				<button class='bottom' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="this.$store.commit('wxGetUserInfo')">
					授权登录
				</button>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		uniNoticeBar,
		uniSwiperDot
	} from "@dcloudio/uni-ui"
	//import uniNoticeBar from '@dcloudio/uni-ui/lib/uni-notice-bar/uni-notice-bar.vue' //也可使用此方式引入组件


	export default {
		components: {
			uniNoticeBar,
			uniSwiperDot
		},
		data() {
			return {
				title: 'Hello',
				SessionKey: '',
				OpenId: '',
				nickName: null,
				avatarUrl: null,
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg',
						content: '内容 C'
					}
				],
				dotStyle: [{
						backgroundColor: 'rgba(0, 0, 0, .3)',
						border: '1px rgba(0, 0, 0, .3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(0, 0, 0, .9)',
						selectedBorder: '1px rgba(0, 0, 0, .9) solid'
					},
					{
						backgroundColor: 'rgba(255, 90, 95,0.3)',
						border: '1px rgba(255, 90, 95,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(255, 90, 95,0.9)',
						selectedBorder: '1px rgba(255, 90, 95,0.9) solid'
					},
					{
						backgroundColor: 'rgba(83, 200, 249,0.3)',
						border: '1px rgba(83, 200, 249,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
						selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
					}
				],
				autoplay: true,
				modeIndex: -1,
				styleIndex: -1,
				current: 0,
				mode: 'indexes',
				dotsStyles: {}
			};
		},
		onLoad: function(option) {
			uni.setNavigationBarTitle({
				title: '天使健康'
			});
			console.log("-------home onload-------");
			console.log(option);
			uni.showToast({
				title: "接收参数：" + JSON.stringify(option),
				duration: 15000
			})
			console.log("-------home onload-------");
			this.getUserInfo();
		},
		onShow() {
			console.log("-------home onshow-------");
		},
		methods: {
			getUserInfo: function() {
				this.API.get(this.ApiUrl.GET_USER_OPENID, {
					params: {
						"openid": this.$store.getters.openid
					}
				}).then((res) => {
					console.log(res);
				}).catch(error => {
					console.log("error");
				}).finally(() => {
					console.log("finally");
				})

			},
			change(e) {
				this.current = e.detail.current
			},
			sendData: function() {
				this.$Router.push({
					name: "apply",
					params: {
						msg: "hello apply"
					}
				});
			},
			pay: function() {
				this.$Router.push({
					name: "wxpay"
				});
			},
			search: function() {
				this.$Router.push({
					name: "search"
				});
			}
		}
	};
</script>

<style>
	.content {
		text-align: center;
		height: 400upx;
		margin-top: 200upx;
	}

	.header {
		margin: 90rpx 0 90rpx 50rpx;
		border-bottom: 1px solid #ccc;
		text-align: center;
		width: 650rpx;
		height: 300rpx;
		line-height: 450rpx;
	}

	.header image {
		width: 200rpx;
		height: 200rpx;
	}

	.content {
		margin-left: 50rpx;
		margin-bottom: 90rpx;
	}

	.content text {
		display: block;
		color: #9d9d9d;
		margin-top: 40rpx;
	}

	.bottom {
		border-radius: 80rpx;
		margin: 70rpx 50rpx;
		font-size: 35rpx;
	}

	.swiper-box {
		height: 400upx;
	}

	.swiper-item {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
		background: #eee;
		color: #fff;
	}

	.swiper-item image {
		width: 100%;
		height: 100%;
	}
</style>
